<template>
<div class="header">
<h1>在线商城后台管理系统</h1>

<div class="her">
<img src="@/assets/logo.png" alt="">
<p>账号:{{}}</p></div>

</div>

<main>
  <div class="left">

  <el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="主页" name="1">
    
  </el-collapse-item>
  <el-collapse-item title="前台首页" name="2">
  </el-collapse-item>
  <el-collapse-item title="用户管理" name="3">
    <router-link :to="{name : 'HomeCart'}">用户列表</router-link>
  </el-collapse-item>
  <el-collapse-item title="商品" name="4">
    <div><router-link :to="{name : 'HomeShopin'}">商品管理</router-link></div>
    <div><router-link :to="{name : 'HomeLogin'}">商品分类管理</router-link></div>
    <div>商品列表</div>
    <div><router-link :to="{name : 'HomeLunbo'}">轮播图管理</router-link></div>
    <div><router-link :to="{name : 'HomeDan'}">订单管理</router-link></div>
  </el-collapse-item>
  <el-collapse-item title="营收管理" name="5">
  </el-collapse-item>
  <el-collapse-item title="文件管理" name="6">
  </el-collapse-item>
</el-collapse>



  </div>

  <div class="right">
    <p>1321</p>
  </div>
</main>

  <!-- <div>
    <button @click="getData">点击请求用户个人信息</button>
  </div> -->

</template>

<script setup>
//inject订阅
// import { inject } from 'vue';
// const $axios = inject('$axios');

// const getData = ()=>{
//   //get请求
//   $axios.get('/userinfo/admin').then( (res)=>{

//     console.log(res);
    
//   } ).catch( (err)=>{
//     console.log(err);
    
//   } )
// }
</script>

<style>
.r2{
  display: flex;
  margin: 5px;
  flex-direction: row;
}
.r1{
  display: flex;
  flex-direction: row;
}

.el-collapse-item__title{
  background-color: #2a2a33;
  color: white;
}
.el-collapse-item__header{
  background-color: #2a2a33;
}
.el-collapse{
  background-color: #2a2a33;
}





.header{
  width: 100%;
  height: 100px;
  background-color: #2a2a33;
  color: yellow;
  display: flex;
  flex-direction: row;
  
}
.header img{
  width: 50px;
  height: 50px;
}
.her{
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: row;
}
main{
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.left{
  width: 200px;
  height: 620px;
  background-color: #2a2a33;
  display: flex;
  flex-direction: column;
}
.right{
  width: 100%;
  overflow: hidden;
}

.ga{
  display: flex;
  flex-direction: column;
}
.ga a{
  margin: 5px;
    color: white;
  text-decoration: none;
}

.one{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.one img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.one a{
  color: white;
  text-decoration: none;
}

.two{
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.two img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.two a{
  color: white;
  text-decoration: none;
}

.three{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.three img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.three a{
  color: white;
  margin: 5px;
  text-decoration: none;
}
.te{
  display: flex;
  flex-direction: column;
}

.four{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.four img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.four a{
  color: white;
  text-decoration: none;
}

.five{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.five img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.five a{
  color: white;
  text-decoration: none;
}

.six{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.six img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.six a{
  color: white;
  text-decoration: none;
}




</style>